<template>
  <div class="game-ui">
    <!-- 顶部信息栏 - 紧凑设计 -->
    <div class="top-hud">
      <!-- 左侧：分数和距离 -->
      <div class="score-section">
        <div class="score-item">
          <span class="value">{{ formattedScore }}</span>
          <span class="label">分数</span>
        </div>
        <div class="score-item">
          <span class="value">{{ formattedDistance }}m</span>
          <span class="label">距离</span>
        </div>
      </div>
      
      <!-- 中间：生命值条 -->
      <div class="health-section">
        <div class="health-bar-container">
          <div class="health-bar">
            <div 
              class="health-fill"
              :style="{ width: healthPercentage + '%' }"
            ></div>
          </div>
          <span class="health-text">{{ currentHealth }}</span>
        </div>
      </div>
      
      <!-- 右侧：控制按钮 -->
      <div class="controls-section">
        <button 
          class="control-btn"
          @click="togglePause"
          :title="isPaused ? '继续游戏' : '暂停游戏'"
        >
          <i :class="isPaused ? 'icon-play' : 'icon-pause'"></i>
        </button>
      </div>
    </div>

    <!-- 道具栏 - 水平布局在顶部 -->
    <div class="power-ups-hud">
      <div 
        v-for="(powerUp, index) in activePowerUps"
        :key="index"
        class="power-up-item"
        :title="powerUp.name"
      >
        <div class="power-up-icon" :class="powerUp.type">
          <i :class="getPowerUpIcon(powerUp.type)"></i>
        </div>
        <div class="power-up-timer">{{ Math.ceil(powerUp.remainingTime) }}</div>
      </div>
    </div>

    <!-- 移动端控制按钮 - 优化布局 -->
    <div v-if="showMobileControls" class="mobile-controls">
      <!-- 左侧：方向控制 -->
      <div class="direction-pad">
        <button 
          class="direction-btn left"
          @touchstart="handleMobileInput('left', true)"
          @touchend="handleMobileInput('left', false)"
          @mousedown="handleMobileInput('left', true)"
          @mouseup="handleMobileInput('left', false)"
        >
          <i class="icon-arrow-left"></i>
        </button>
        <button 
          class="direction-btn right"
          @touchstart="handleMobileInput('right', true)"
          @touchend="handleMobileInput('right', false)"
          @mousedown="handleMobileInput('right', true)"
          @mouseup="handleMobileInput('right', false)"
        >
          <i class="icon-arrow-right"></i>
        </button>
      </div>
      
      <!-- 右侧：动作按钮 -->
      <div class="action-buttons">
        <button 
          class="action-btn jump"
          @touchstart="handleMobileInput('jump', true)"
          @touchend="handleMobileInput('jump', false)"
          @mousedown="handleMobileInput('jump', true)"
          @mouseup="handleMobileInput('jump', false)"
        >
          <i class="icon-jump"></i>
          <span>跳跃</span>
        </button>
        <button 
          class="action-btn slide"
          @touchstart="handleMobileInput('slide', true)"
          @touchend="handleMobileInput('slide', false)"
          @mousedown="handleMobileInput('slide', true)"
          @mouseup="handleMobileInput('slide', false)"
        >
          <i class="icon-slide"></i>
          <span>滑铲</span>
        </button>
      </div>
    </div>

    <!-- 桌面端操作提示 -->
    <div v-if="!showMobileControls" class="desktop-hints">
      <div class="hint-item">
        <kbd>空格</kbd>
        <span>跳跃</span>
      </div>
      <div class="hint-item">
        <kbd>↓</kbd>
        <span>滑铲</span>
      </div>
      <div class="hint-item">
        <kbd>ESC</kbd>
        <span>暂停</span>
      </div>
    </div>

    <!-- 暂停菜单 -->
    <div v-if="isPaused" class="pause-overlay">
      <div class="pause-menu">
        <h2>游戏暂停</h2>
        <div class="pause-buttons">
          <button class="btn btn-primary" @click="resumeGame">
            <i class="icon-play"></i>
            继续游戏
          </button>
          <button class="btn btn-secondary" @click="restartGame">
            <i class="icon-restart"></i>
            重新开始
          </button>
          <button class="btn btn-secondary" @click="goToMenu">
            <i class="icon-home"></i>
            返回菜单
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted } from 'vue'

/**
 * 游戏UI组件
 * 显示游戏状态信息、控制按钮和移动端控制界面
 * @component
 */

interface PowerUp {
  type: string
  name: string
  remainingTime: number
}

interface Props {
  /** 当前分数 */
  score?: number
  /** 当前距离 */
  distance?: number
  /** 当前生命值 */
  health?: number
  /** 最大生命值 */
  maxHealth?: number
  /** 激活的道具列表 */
  powerUps?: PowerUp[]
  /** 是否暂停 */
  paused?: boolean
  /** 是否显示移动端控制 */
  showMobileControls?: boolean
}

interface Emits {
  /** 暂停/继续游戏 */
  (e: 'toggle-pause'): void
  /** 显示菜单 */
  (e: 'show-menu'): void
  /** 重新开始游戏 */
  (e: 'restart-game'): void
  /** 返回菜单 */
  (e: 'go-to-menu'): void
  /** 移动端输入事件 */
  (e: 'mobile-input', action: string, pressed: boolean): void
}

const props = withDefaults(defineProps<Props>(), {
  score: 0,
  distance: 0,
  health: 100,
  maxHealth: 100,
  powerUps: () => [],
  paused: false,
  showMobileControls: false
})

const emit = defineEmits<Emits>()

// 响应式数据
const isPaused = computed(() => props.paused)
const currentHealth = computed(() => Math.max(0, props.health))
const maxHealth = computed(() => props.maxHealth)
const activePowerUps = computed(() => props.powerUps)

// 计算属性
const formattedScore = computed(() => {
  return props.score.toLocaleString()
})

const formattedDistance = computed(() => {
  return Math.floor(props.distance).toLocaleString()
})

const healthPercentage = computed(() => {
  return Math.max(0, Math.min(100, (currentHealth.value / maxHealth.value) * 100))
})

/**
 * 获取道具图标类名
 * @param type - 道具类型
 * @returns 图标类名
 */
const getPowerUpIcon = (type: string): string => {
  const iconMap: Record<string, string> = {
    magnet: 'icon-magnet',
    speedBoost: 'icon-speed',
    shield: 'icon-shield',
    doubleScore: 'icon-star',
    extraLife: 'icon-heart'
  }
  return iconMap[type] || 'icon-question'
}

/**
 * 切换暂停状态
 */
const togglePause = (): void => {
  emit('toggle-pause')
}

/**
 * 显示菜单
 */
const showMenu = (): void => {
  emit('show-menu')
}

/**
 * 继续游戏
 */
const resumeGame = (): void => {
  emit('toggle-pause')
}

/**
 * 重新开始游戏
 */
const restartGame = (): void => {
  emit('restart-game')
}

/**
 * 返回菜单
 */
const goToMenu = (): void => {
  emit('go-to-menu')
}

/**
 * 处理移动端输入
 * @param action - 动作类型
 * @param pressed - 是否按下
 */
const handleMobileInput = (action: string, pressed: boolean): void => {
  emit('mobile-input', action, pressed)
}

// 检测是否为移动设备
const isMobileDevice = (): boolean => {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
}

// 生命周期钩子
onMounted(() => {
  // 如果是移动设备，自动显示移动控制
  if (isMobileDevice() && !props.showMobileControls) {
    // 这里可以通过事件通知父组件启用移动控制
    console.log('检测到移动设备，建议启用移动控制')
  }
})

onUnmounted(() => {
  // 清理工作
})
</script>

<style lang="scss" scoped>
@import '@/styles/responsive.scss';

.game-ui {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 100;
  font-family: 'Arial', sans-serif;

  // 允许子元素接收点击事件
  * {
    pointer-events: auto;
  }

  // 顶部HUD - 全屏优化的水平布局
  .top-hud {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    border-radius: 0;
    padding: 1rem 1.5rem;
    color: white;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    
    @include mobile-all {
      top: 0;
      left: 0;
      right: 0;
      padding: env(safe-area-inset-top, 0.75rem) env(safe-area-inset-right, 1rem) 0.75rem env(safe-area-inset-left, 1rem);
      background: rgba(0, 0, 0, 0.9);
    }
    
    @include mobile-small {
      padding: env(safe-area-inset-top, 0.5rem) env(safe-area-inset-right, 0.75rem) 0.5rem env(safe-area-inset-left, 0.75rem);
    }

    .score-section {
      display: flex;
      gap: 1.5rem;
      
      @include mobile-all {
        gap: 1rem;
      }
      
      @include mobile-small {
        gap: 0.75rem;
      }

      .score-item {
        text-align: center;
        
        .value {
          display: block;
          font-size: 1.4rem;
          font-weight: bold;
          line-height: 1;
          color: #fff;
          
          @include mobile-all {
            font-size: 1.2rem;
          }
          
          @include mobile-small {
            font-size: 1rem;
          }
        }
        
        .label {
          display: block;
          font-size: 0.7rem;
          opacity: 0.8;
          margin-top: 2px;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          
          @include mobile-small {
            font-size: 0.6rem;
          }
        }
      }
    }

    .health-section {
      flex: 1;
      max-width: 200px;
      margin: 0 2rem;
      
      @include mobile-all {
        max-width: 150px;
        margin: 0 1rem;
      }
      
      @include mobile-small {
        max-width: 100px;
        margin: 0 0.5rem;
      }

      .health-bar-container {
        display: flex;
        align-items: center;
        gap: 0.5rem;

        .health-bar {
          flex: 1;
          height: 8px;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 4px;
          overflow: hidden;
          border: 1px solid rgba(255, 255, 255, 0.3);
          
          @include mobile-small {
            height: 6px;
          }

          .health-fill {
            height: 100%;
            background: linear-gradient(90deg, #ff4444 0%, #ffaa00 50%, #44ff44 100%);
            transition: width 0.3s ease;
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
          }
        }

        .health-text {
          font-size: 0.8rem;
          font-weight: bold;
          min-width: 30px;
          text-align: right;
          
          @include mobile-small {
            font-size: 0.7rem;
            min-width: 25px;
          }
        }
      }
    }

    .controls-section {
      .control-btn {
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        color: white;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: $transition-normal;
        border: 1px solid rgba(255, 255, 255, 0.3);
        
        @include mobile-all {
          width: 32px;
          height: 32px;
        }
        
        @include touch-device {
          width: 40px;
          height: 40px;
          
          &:active {
            background: rgba(255, 255, 255, 0.4);
            transform: scale(0.95);
          }
        }

        @include non-touch-device {
          &:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
          }
        }
        
        i {
          font-size: 14px;
          
          @include mobile-all {
            font-size: 12px;
          }
        }
      }
    }
  }

  // 道具栏 - 水平布局
  .power-ups-hud {
    position: absolute;
    top: 5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    
    @include mobile-all {
      top: 4rem;
      gap: 0.25rem;
    }

    .power-up-item {
      background: rgba(0, 0, 0, 0.8);
      backdrop-filter: blur(8px);
      border-radius: $border-radius-md;
      padding: 0.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.25rem;
      min-width: 50px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      
      @include mobile-all {
        padding: 0.375rem;
        min-width: 40px;
      }

      .power-up-icon {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: linear-gradient(135deg, $primary-color, $secondary-color);
        color: white;
        
        @include mobile-all {
          width: 24px;
          height: 24px;
        }
        
        i {
          font-size: 14px;
          
          @include mobile-all {
            font-size: 12px;
          }
        }
      }

      .power-up-timer {
        font-size: 0.7rem;
        font-weight: bold;
        color: white;
        
        @include mobile-all {
          font-size: 0.6rem;
        }
      }
    }
  }

  // 移动端控制 - 全屏优化布局
  .mobile-controls {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 1.5rem 2rem;
    z-index: 999;
    
    @include mobile-all {
      bottom: 0;
      left: 0;
      right: 0;
      padding: 1rem env(safe-area-inset-right, 1.5rem) env(safe-area-inset-bottom, 1.5rem) env(safe-area-inset-left, 1.5rem);
    }
    
    @include mobile-small {
      padding: 0.75rem env(safe-area-inset-right, 1rem) env(safe-area-inset-bottom, 1rem) env(safe-area-inset-left, 1rem);
    }

    .direction-pad {
      display: flex;
      gap: 0.75rem;
      
      .direction-btn {
        width: 60px;
        height: 60px;
        border: none;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(8px);
        color: white;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: $transition-normal;
        user-select: none;
        border: 2px solid rgba(255, 255, 255, 0.3);
        
        @include mobile-small {
          width: 50px;
          height: 50px;
        }
        
        @include touch-device {
          -webkit-tap-highlight-color: transparent;
          
          &:active {
            background: rgba(0, 0, 0, 0.9);
            transform: scale(0.95);
            border-color: rgba(255, 255, 255, 0.5);
          }
        }
        
        i {
          font-size: 24px;
          
          @include mobile-small {
            font-size: 20px;
          }
        }
      }
    }

    .action-buttons {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;

      .action-btn {
        width: 80px;
        height: 80px;
        border: none;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(8px);
        color: white;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: $transition-normal;
        user-select: none;
        border: 2px solid rgba(255, 255, 255, 0.3);
        
        @include mobile-small {
          width: 70px;
          height: 70px;
        }
        
        @include touch-device {
          -webkit-tap-highlight-color: transparent;
          
          &:active {
            background: rgba(0, 0, 0, 0.9);
            transform: scale(0.95);
            border-color: rgba(255, 255, 255, 0.5);
          }
        }
        
        &.jump {
          background: linear-gradient(135deg, #4CAF50, #45a049);
        }
        
        &.slide {
          background: linear-gradient(135deg, #2196F3, #1976D2);
        }
        
        i {
          font-size: 28px;
          margin-bottom: 4px;
          
          @include mobile-small {
            font-size: 24px;
            margin-bottom: 2px;
          }
        }
        
        span {
          font-size: 10px;
          font-weight: bold;
          
          @include mobile-small {
            font-size: 8px;
          }
        }
      }
    }
    
    // 横屏优化
    @include landscape {
      @include mobile-all {
        .action-buttons {
          flex-direction: row;
          gap: 1rem;
          
          .action-btn {
            width: 70px;
            height: 70px;
          }
        }
      }
    }
  }

  // 桌面端操作提示
  .desktop-hints {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    
    @include mobile-all {
      display: none;
    }

    .hint-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(8px);
      padding: 0.5rem 0.75rem;
      border-radius: $border-radius-md;
      color: white;
      font-size: 0.8rem;
      
      kbd {
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 4px;
        padding: 0.25rem 0.5rem;
        font-size: 0.7rem;
        font-weight: bold;
        min-width: 24px;
        text-align: center;
      }
    }
  }

  // 暂停菜单
  .pause-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    backdrop-filter: blur(8px);

    .pause-menu {
      background: white;
      padding: 2rem;
      border-radius: $border-radius-xl;
      text-align: center;
      max-width: 320px;
      width: 90%;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      
      @include mobile-all {
        width: 95%;
        max-width: 300px;
        padding: 1.5rem;
      }

      h2 {
        margin-bottom: 2rem;
        color: $text-color;
        font-size: 1.8rem;
        font-weight: bold;
        
        @include mobile-all {
          font-size: 1.5rem;
          margin-bottom: 1.5rem;
        }
      }

      .pause-buttons {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        .btn {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
          padding: 1rem 1.5rem;
          border: none;
          border-radius: $border-radius-lg;
          font-size: 1rem;
          font-weight: 600;
          cursor: pointer;
          transition: $transition-normal;
          
          @include mobile-all {
            padding: 1.25rem;
            font-size: 1.1rem;
          }
          
          @include touch-device {
            min-height: 48px;
          }

          i {
            font-size: 1.1rem;
          }

          &.btn-primary {
            background: linear-gradient(135deg, $primary-color, #45a049);
            color: white;
            box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);

            @include non-touch-device {
              &:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4);
              }
            }
            
            @include touch-device {
              &:active {
                transform: scale(0.98);
              }
            }
          }

          &.btn-secondary {
            background: linear-gradient(135deg, $secondary-color, #1976D2);
            color: white;
            box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);

            @include non-touch-device {
              &:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 16px rgba(33, 150, 243, 0.4);
              }
            }
            
            @include touch-device {
              &:active {
                transform: scale(0.98);
              }
            }
          }
        }
      }
    }
  }
}

// 图标样式 - 更好的视觉效果
.icon-play::before { content: '▶'; }
.icon-pause::before { content: '⏸'; }
.icon-restart::before { content: '🔄'; }
.icon-home::before { content: '🏠'; }
.icon-arrow-left::before { content: '←'; }
.icon-arrow-right::before { content: '→'; }
.icon-jump::before { content: '⬆'; }
.icon-slide::before { content: '⬇'; }
.icon-magnet::before { content: '🧲'; }
.icon-speed::before { content: '⚡'; }
.icon-shield::before { content: '🛡'; }
.icon-star::before { content: '⭐'; }
.icon-heart::before { content: '❤'; }
.icon-question::before { content: '?'; }
</style>